<template>
  <div>
    <!-- 头部 -->
    <span>计时 / 我的计时</span>
    <div class="header">
      <h2>我的计时</h2>
      <button>计时添加</button>
    </div>
    <div class="header">
      <span>我的计时页面，管理个人提交计时，并查看团队成员计时。</span>
      <el-date-picker v-model="year" type="year" placeholder="请输入年份" />
    </div>

    <!-- 列表 -->
    <div>
      <el-tabs type="border-card">
        <el-tab-pane label="全部">
          <div>
            <span>计时查询</span>
            <div>
              <span class="input"
                >计时类型：
                <el-select
                  v-model="value"
                  placeholder="请选择计时类型"
                  size="defalut"
                  style="width: 220px"
                >
                  <el-option
                    v-for="item in options"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                /></el-select>
              </span>
              <span class="input"
                >案件名称：
                <el-select
                  v-model="value"
                  placeholder="请选择案件或者输入关键词检索"
                  size="defalut"
                  style="width: 220px"
                >
                  <el-option
                    v-for="item in options"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                /></el-select>
              </span>
              <span class="input"
                >提交人：
                <el-select
                  v-model="value"
                  placeholder="请选择姓名或者输入关键词检索"
                  size="defalut"
                  style="width: 220px"
                >
                  <el-option
                    v-for="item in options"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                /></el-select>
              </span>
              <span class="input"
                >工作描述：
                <el-select
                  v-model="value"
                  placeholder="请输入工作描述"
                  size="defalut"
                  style="width: 220px"
                >
                  <el-option
                    v-for="item in options"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                /></el-select>
              </span>
              <span
                >日期：
                <el-date-picker
                  v-model="value2"
                  type="datetimerange"
                  start-placeholder="Start date"
                  end-placeholder="End date"
                  format="YYYY-MM-DD HH:mm:ss"
                  date-format="YYYY/MM/DD ddd"
                  time-format="A hh:mm:ss"
                  style="width: 220px"
              /></span>
              <button>查询</button>
              <button>重置</button>
              <span>收起</span>
            </div>
          </div>
        </el-tab-pane>
        <el-tab-pane label="未审核">未审核</el-tab-pane>
        <el-tab-pane label="已审核">已审核</el-tab-pane>
        <el-tab-pane label="被驳回">被驳回</el-tab-pane>
      </el-tabs>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
const year = ref()
</script>

<style scoped>
.header {
  margin-top: 30px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.input {
  margin-left: 20px;
}
</style>
